<template>
	<div class="radios" v-if="dtlist.length>0">
		<div class="title">{{dtlist[0].group_name}}</div>
		<div class="region">
			<div class="radio" v-for="(i,v) in dtlist[0].sections">
				<router-link :to='"/radios/dt"+v'>
					{{i.name}}
				</router-link>
			</div>
		</div>
		<div class="title">{{dtlist[1].group_name}}</div>
		<div class="content">
			<div class="detailed"  v-for="v in dtlist[1].sections" >{{v.name}}台</div>
			<div class="xsjt"></div>
		</div>
		<div class="lath"></div>
		<div class="btitle">正在直播</div>
		<div class="live_telecast"  v-if="llist.thumbs">
			<div class="img">
				<img v-bind:src="llist.thumbs.large_thumb"/>
			</div>
			<div class="text">
				<div class="ttitle">{{llist.title}}</div>
				<div class="tname">{{llist.description}}</div>
				<div class="ttime">直播时间{{llist.update_time}}</div>
				<div class="sc">收藏</div>
			</div>
		</div>
		<router-view>
			
		</router-view>
	</div>
</template>

<script>
	export default{
		data(){
			return {
				dtlist:[],
				llist:[]
			} 
		},
		methods:{
			requestdt(){
				this.$http({
					url:'/static/diantai.json',
					method:'GET'
				}).then(function(req){
					this.dtlist = req.data.data;
//					console.log(this.dtlist);
				})
			},
			requestlt(){
				this.$http({
					url:'/static/lilist.json',
					method:'GET'
				}).then(function(req){
					this.llist = req.data.data;
//					console.log(this.llist);
				})
			},
		},
		mounted(){
			this.requestdt();
			this.requestlt();
		}
	}
	
	
</script>

<style scoped>
	.radios{
		width: 100%;
		height: 100%;
	}
	.title{
		/*width: 100%;*/
		padding-left: 0.521739rem;
		height: 0.97826rem;
		line-height: 0.97826rem;
		background-color: #f5f5f7;
		font-size: 0.47826rem;
		position: relative;
	}
	.title:before{
		content: "";
		width: 0.086956rem;
		height: 0.47826rem;
		background-color:#fb2f32 ;
		position: absolute;
		top: 0.260869rem;
		left: 0.321739rem;
	}
	.region{
		width: 100%;
		height: 1.217391rem;
		display: flex;
	}
	.region>.radio{
		width: 25%;
		height: 1.217391rem;
		line-height:1.217391rem;
		font-size: 0.413043rem;
		text-align: center;
	}
	.content{
		width: 100%;
		height: auto;
		display: flex;
		flex-wrap: wrap;
	}
	.detailed{
		width: 33.33334%;
		height: 1.195652rem;
		height: 1.195652rem;
		line-height:1.195652rem;
		font-size: 0.413043rem;
		text-align: center;
		border-bottom: solid 0.043478rem #f9f9f9;
	}
	.xsjt{
		width: 33.33334%;
		height: 1.195652rem;
		background: url(../../img/xiajt.png) center center no-repeat;
		background-size: 20%;
	}
	.lath{
		width: 100%;
		height: 0.260869rem;
		background-color: #f5f5f7;
	}
	.btitle{
		/*width: 100%;*/
		padding-left: 0.586956rem;
		height: 0.891304rem;
		line-height: 0.891304rem;
		font-size: 0.434782rem;
	}
	.live_telecast{
		/*width: 100%;*/
		height: 1.73913rem;
		padding: 0.217391rem;
		/*background-color: red;*/
		display: flex;
	}
	.img{
		width: 2.521739rem;
		height: 100%;
		display: flex;
		align-items: center;
	}
	.img img{
		width: 80%;
		height: 80%;
	}
	.text{
		width: 7.065217rem;
		height: 1.73913rem;
		position: relative;
	}
	.ttitle{
		width: 100%;
		height: 0.782608rem;
		line-height: 0.782608rem;
		font-size: 0.47826rem;
	}
	.tname{
		width: 100%;
		height: 0.521739rem;
		line-height: 0.521739rem;
		font-size:0.347826rem;
	}
	.ttime{
		width: 100%;
		height: 0.521739rem;
		line-height: 0.521739rem;
		font-size:0.347826rem;
		color: #9c9c9c;
	}
	.sc{
		width: 1.086956rem;
		height: 0.543478rem;
		font-size: 0.391304rem;
		color: #dc4c4c;
		text-align: center;
		border-radius: 0.543478rem;
		padding: 0.108695rem 0.217391rem 0.108695rem 0.217391rem;
		border: solid 0.043478rem #ede7e7;
		position: absolute;
		right: 0rem;
		top: 25%;
	}
</style>